<template>
	<view class="warp">
		<view class="mb30">
			<u-notice-bar color="#3dd3cb" bgColor="#dff4f4" :text="text1"></u-notice-bar>
		</view>

		<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1" :labelStyle="{background:'red'}">
			<block>
				<view class="title">
					学历:
				</view>
				<u-form-item prop="val.education" @click="showEducation = true;">
					<u--input v-model="model1.val.education" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</block>
			<block>
				<view class="title">
					学位:
				</view>
				<u-form-item prop="val.degree" @click="showDegree = true;">
					<u--input v-model="model1.val.degree" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</block>
			<block>
				<view class="title">
					证件号码:
				</view>
				<u-form-item prop="userInfo.certificate_num">
					<u--input v-model="model1.userInfo.certificate_num" placeholder="请输入证件号码" border="none"></u--input>
				</u-form-item>
			</block>
			<block>
				<view class="title">
					证件类型:
				</view>
				<u-form-item prop="val.cert" @click="showCert = true;">
					<u--input v-model="model1.val.cert" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</block>
			<block>
				<view class="title">
					国籍:
				</view>
				<u-form-item prop="val.nation" @click="showNation = true;">
					<u--input v-model="model1.val.nation" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</block>
			<block>
				<view class="title">
					婚姻状况:
				</view>
				<u-form-item prop="userInfo.marry">
					<u-radio-group v-model="marry" placement="row">
						<u-radio activeColor="#3dd3cb" :customStyle="{marginRight:'26rpx'}"
							v-for="(item, index) in marryList" :key="index" :label="item.name" :name="item.val"
							@change="marryChange">
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</block>
			<block>
				<view class="title">
					居住状况:
				</view>
				<u-form-item prop="val.living" @click="showLiving = true;">
					<u--input v-model="model1.val.living" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</block>
			<block>
				<view class="title">
					居住地址:
				</view>
				<u-form-item prop="userInfo.living_address">
					<view class="input-box flex-1" @click="showMulLinkageThreePicker('living_address')">
						<input class="ml20 f32 flex-1" type="text" value="" placeholder-class="grary9" placeholder=""
							v-model="living_address" disabled="true" />
					</view>
				</u-form-item>
			</block>
			<block>
				<view class="title">
					居住详细地址:
				</view>
				<u-form-item prop="userInfo.living_ress">
					<u--input v-model="model1.userInfo.living_ress" placeholder="请输入居住详细地址" border="none"></u--input>
				</u-form-item>
			</block>
			<block>
				<view class="title">
					通讯地址邮编:
				</view>
				<u-form-item prop="userInfo.postcode">
					<u--input v-model="model1.userInfo.postcode" placeholder="请输入通讯地址邮编" border="none"></u--input>
				</u-form-item>
			</block>
			<block>
				<view class="title">
					通讯地址:
				</view>
				<u-form-item prop="userInfo.mail_address">
					<view class="input-box flex-1" @click="showMulLinkageThreePicker('mail_address')">
						<input class="ml20 f32 flex-1" type="text" value="" placeholder-class="grary9" placeholder=""
							v-model="mail_address" disabled="true" />
					</view>
				</u-form-item>
			</block>
			<block>
				<view class="title">
					通讯详细地址:
				</view>
				<u-form-item prop="userInfo.mail_ress">
					<u--input v-model="model1.userInfo.mail_ress" placeholder="请输入通讯详细地址" border="none"></u--input>
				</u-form-item>
			</block>
			<block>
				<view class="title">
					就业情况:
				</view>
				<u-form-item prop="val.job" @click="showJob = true;">
					<u--input v-model="model1.val.job" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</block>




			<block>
				<view class="title">
					单位性质:
				</view>
				<u-form-item prop="val.company" @click="showCompany = true;">
					<u--input v-model="model1.val.company" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</block>

			<block>
				<view class="title">
					单位名称:
				</view>
				<u-form-item prop="userInfo.company_name">
					<u--input v-model="model1.userInfo.company_name" placeholder="请输入当前单位名称" border="none"></u--input>
				</u-form-item>
			</block>
			<block>
				<view class="title">
					单位地址:
				</view>
				<u-form-item prop="userInfo.work_place">
					<view class="input-box flex-1" @click="showMulLinkageThreePicker('work_place')">
						<input class="ml20 f32 flex-1" type="text" value="" placeholder-class="grary9" placeholder=""
							v-model="work_place" disabled="true" />
					</view>
				</u-form-item>
			</block>
			<block>
				<view class="title">
					单位详细地址:
				</view>
				<u-form-item prop="userInfo.company_address">
					<u--input v-model="model1.userInfo.company_address" placeholder="请输入单位详细地址"
						border="none"></u--input>
				</u-form-item>
			</block>





			<view class="submit">
				<u-button type="primary" color="#3dd3cb" text="提交资料" @click="submitForm(model1)"></u-button>
			</view>

		</u--form>

		<u-action-sheet :show="showNation" :actions="nationlist" title="请选择国籍" @close="showNation = false"
			@select="nationSelect">
		</u-action-sheet>

		<u-action-sheet :show="showCert" :actions="certlist" title="请选择证件类型" @close="showCert = false"
			@select="certSelect">
		</u-action-sheet>

		<u-action-sheet :show="showLiving" :actions="livinglist" title="请选择当前居住状况" @close="showLiving = false"
			@select="livingSelect">
		</u-action-sheet>
		<u-action-sheet :show="showCompany" :actions="companylist" title="请选择单位性质" @close="showCompany = false"
			@select="companySelect">
		</u-action-sheet>
		<u-action-sheet :show="showJob" :actions="joblist" title="请选择当前就业情况" @close="showJob = false"
			@select="jobSelect">
		</u-action-sheet>
		<u-action-sheet :show="showDegree" :actions="degreelist" title="请选择学位" @close="showDegree = false"
			@select="degreeSelect">
		</u-action-sheet>
		<u-action-sheet :show="showEducation" :actions="educationlist" title="请选择学历" @close="showEducation = false"
			@select="educationSelect">
		</u-action-sheet>

		<mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area"
			:pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				is_load: false,
				province: [],
				city: [],
				area: [],
				cityPickerValueDefault: [0, 0, 0],
				selectCity: '选择省,市,区',
				mail_address: '选择省,市,区',
				living_address: '选择省,市,区',
				work_place: '选择省,市,区',



				isshiming: "",
				// 滚动通知
				text1: "请如实填写,资料填写越完整,通过率越高",
				// 表单信息
				model1: {
					userInfo: {
						nation: '', // 国籍
						cert: '', //  证件类型
						living: '', // 居住情况
						company: '', // 单位性质
						job: '', // 就业情况
						degree: '', // 学位
						education: '', // 学历
						marry: '', // 婚姻状况
						company_name: '', // 单位名称
						work_place: '', // 单位地址
						company_address: '', // 单位详细地址
						postcode: '', // 邮编
						mail_address: '', //通讯地址
						mail_ress: '', // 通讯详细地址
						living_address: '', //居住地址
						living_ress: '', //居住详细地址
						certificate_num: '' // 证件号码
					},
					val: {
						nation: '', //国籍
						cert: '', // 证件类型
						living: '', // 居住情况
						company: '', // 单位性质
						job: '', // 就业情况
						degree: '', // 学位
						education: '', // 学历
					},
				},
				// 选择框的值
				nationlist: [],
				certlist: [],
				livinglist: [],
				companylist: [],
				joblist: [],
				degreelist: [],
				educationlist: [],
				marry: '',
				marryList: [],

				// 校验规则
				rules: {
					'userInfo.nation': {
						type: 'string',
						required: true,
						message: '请选择国籍',
						trigger: ['blur', 'change']
					},
					'userInfo.cert': {
						type: 'string',
						required: true,
						message: '请选择证件类型',
						trigger: ['blur', 'change']
					},
					'userInfo.living': {
						type: 'string',
						required: true,
						message: '请选择居住状况',
						trigger: ['blur', 'change']
					},
					'userInfo.company': {
						type: 'string',
						required: true,
						message: '请选择单位性质',
						trigger: ['blur', 'change']
					},
					'userInfo.job': {
						type: 'string',
						required: true,
						message: '请选择就业情况',
						trigger: ['blur', 'change']
					},
					'userInfo.degree': {
						type: 'string',
						required: true,
						message: '请选择学位',
						trigger: ['blur', 'change']
					},
					'userInfo.education': {
						type: 'string',
						required: true,
						message: '请选择学历',
						trigger: ['blur', 'change']
					},
					'userInfo.marry': {
						type: 'string',
						required: true,
						message: '请选择婚姻状况',
						trigger: ['blur', 'change']
					},
					'userInfo.company_name': {
						type: 'string',
						required: true,
						message: '请选择单位名称',
						trigger: ['blur', 'change']
					},
					'userInfo.work_place': {
						type: 'string',
						required: true,
						message: '请选择单位地址',
						trigger: ['blur', 'change']
					},
					'userInfo.company_address': {
						type: 'string',
						required: true,
						message: '请选择单位详细地址',
						trigger: ['blur', 'change']
					},
					'userInfo.postcode': {
						type: 'string',
						required: true,
						message: '请填写邮编',
						trigger: ['blur', 'change']
					},
					'userInfo.mail_address': {
						type: 'string',
						required: true,
						message: '请选择通讯地址',
						trigger: ['blur', 'change']
					},
					'userInfo.mail_ress': {
						type: 'string',
						required: true,
						message: '请填写通讯详细地址',
						trigger: ['blur', 'change']
					},
					'userInfo.living_address': {
						type: 'string',
						required: true,
						message: '请选择居住地址',
						trigger: ['blur', 'change']
					},
					'userInfo.living_ress': {
						type: 'string',
						required: true,
						message: '请填写居住详细地址',
						trigger: ['blur', 'change']
					},
					'userInfo.certificate_num': {
						type: 'string',
						required: true,
						message: '请填写证件号码',
						trigger: ['blur', 'change']
					},

				},
				// 是否显示
				showNation: false,
				showCert: false,
				showLiving: false,
				showCompany: false,
				showJob: false,
				showDegree: false,
				showEducation: false,

				show: false,
				showzmxyf: false,
				showgjj: false,
				showhb: false,
				showxyk: false,
				showyhkd: false,
				showsrzk: false
			}
		},
		onLoad() {
			this.getData();
			this.getData1();
			// if (this.model1.val.nation != '无') {
			// 	this.show = true;
			// }
		},
		methods: {
			// 获取省市区
			getData1() {
				let self = this;
				self._post('settings/getRegion', {}, function(res) {
					self.province = res.data.regionData[0];
					self.city = res.data.regionData[1];
					self.area = res.data.regionData[2];
					self.is_load = true;
				});
			},
			/*确定选择的省市区*/
			onConfirm(e) {
				let self = this;
				console.log(e)
				switch (self.selectCity) {
					case 'work_place':
						self.model1.userInfo.work_place = e.label;
						self.work_place = e.label;
						break;
					case 'mail_address':
						self.model1.userInfo.mail_address = e.label;
						self.mail_address = e.label;
						break;
					case 'living_address':
						self.model1.userInfo.living_address = e.label;
						self.living_address = e.label;
						break;
					default:
						break;
				}
			},
			/*三级联动选择*/
			showMulLinkageThreePicker(e) {
				console.log("看看卡")
				this.selectCity = e
				this.$refs.mpvueCityPicker.show();
			},
			// 提交资料
			submitForm() {
				uni.showLoading({
					title: '提交中,请勿离开页面'
				});

				let obj = {
					nation: this.model1.userInfo.nation, // 国籍
					cert: this.model1.userInfo.cert, //  证件类型
					living: this.model1.userInfo.living, // 居住情况
					company: this.model1.userInfo.company, // 单位性质
					job: this.model1.userInfo.job, // 就业情况
					degree: this.model1.userInfo.degree, // 学位
					education: this.model1.userInfo.education, // 学历
					marry: this.model1.userInfo.marry, // 婚姻状况
					company_name: this.model1.userInfo.company_name, // 单位名称
					work_place: this.model1.userInfo.work_place, // 单位地址
					company_address: this.model1.userInfo.company_address, // 单位详细地址
					postcode: this.model1.userInfo.postcode, // 邮编
					mail_address: this.model1.userInfo.mail_address, //通讯地址
					mail_ress: this.model1.userInfo.mail_ress, // 通讯详细地址
					living_address: this.model1.userInfo.living_address, //居住地址
					living_ress: this.model1.userInfo.living_ress, //居住详细地址
					certificate_num: this.model1.userInfo.certificate_num // 证件号码
				}

				let objFun = (obj) => {
					for (let var1 in obj) {
						if (!obj[var1]) {
							return false
						}
					}
				};

				if (objFun(obj) == false) {
					uni.showToast({
						title: '请将信息填写完整!!',
						duration: 2000
					});
					return
				}
				this._post('user.user/addNotaryInfo', {
					marry_info: this.model1.userInfo.marry, //婚姻信息
					education: this.model1.userInfo.education, //学历
					degree: this.model1.userInfo.degree, //学位
					job_info: this.model1.userInfo.job, // 就业情况
					company_type: this.model1.userInfo.company, //单位性质
					company_name: this.model1.userInfo.company_name, //单位名称
					work_place: `${this.model1.userInfo.work_place},${this.model1.userInfo.company_address}`, //单位详细地址
					mail_address: `${this.model1.userInfo.mail_address},${this.model1.userInfo.mail_ress}`, //通讯地址
					postcode: this.model1.userInfo.postcode, //通讯地址编码
					living_status: this.model1.userInfo.living, //居住状况
					living_address: `${this.model1.userInfo.living_address},${this.model1.userInfo.living_ress}`, //居住地址
					nationality: this.model1.userInfo.nation, //国籍
					certificate_type: this.model1.userInfo.cert, //证件类型
					certificate_num: this.model1.userInfo.certificate_num, //证件号
				}, function(res) {
					// console.log(res);
					uni.hideLoading();
					if (res.code == 1) {
						uni.showToast({
							title:'提交成功',
							duration: 2000
						});
						uni.navigateBack();
						// uni.redirectTo({
						// 	url: "/pages/user/authentication"
						// })
					} else {
						uni.showToast({
							title: "提交失败,请重新提交或联系客服!!",
							duration: 2000
						});
					}
				});
			},
			// 获取数据
			getData() {
				let self = this;
				self._get(
					'user.user/notaryEnum', {},
					function(res) {
						console.log(res.data, "成功返回");
						self.nationlist = res.data.nation
						self.certlist = res.data.cert
						self.livinglist = res.data.living
						self.companylist = res.data.company
						self.joblist = res.data.job
						self.degreelist = res.data.degree
						self.educationlist = res.data.education
						self.marryList = res.data.marry

					}
				);
			},
			nationSelect(e) {
				console.log(e);
				this.model1.userInfo.nation = e.val;
				this.model1.val.nation = e.name;
				// this.$refs.form1.validateField('userInfo.nation');
				// if (this.model1.val.nation != '无') {
				// 	this.show = true;
				// }
			},
			certSelect(e) {
				console.log(e)
				this.model1.userInfo.cert = e.val;
				this.model1.val.cert = e.name;
				// this.$refs.form1.validateField('userInfo.cert');
			},
			livingSelect(e) {
				this.model1.userInfo.living = e.val;
				this.model1.val.living = e.name;
				// this.$refs.form1.validateField('userInfo.living');
			},
			companySelect(e) {
				this.model1.userInfo.company = e.val;
				this.model1.val.company = e.name;
				// this.$refs.form1.validateField('userInfo.company');
			},
			jobSelect(e) {
				this.model1.userInfo.job = e.val;
				this.model1.val.job = e.name;
				// this.$refs.form1.validateField('userInfo.job');
			},
			degreeSelect(e) {
				this.model1.userInfo.degree = e.val;
				this.model1.val.degree = e.name;
				// this.$refs.form1.validateField('userInfo.degree');
			},
			educationSelect(e) {
				this.model1.userInfo.education = e.val;
				this.model1.val.education = e.name;
				// this.$refs.form1.validateField('userInfo.education');
			},
			marryChange(n) {
				console.log('radioChange', n);
				this.model1.userInfo.marry = n;
			},
		},
	}
</script>

<style lang="scss">
	page {
		// padding: 0 20rpx;
	}

	.warp /deep/ .u-form-item {
		background-color: #fff;
		padding: 0 24rpx;
	}

	// .u-form-item

	.warp {
		padding: 0 20rpx;
		background: #f8fafb;
	}

	.title {
		font-size: 30rpx;
		margin: 40rpx 0 16rpx;
		// margin: 5rpx;
	}

	.submit {
		margin: 35rpx 20rpx;
		background-color: #3dd3cb;
		color: white;
	}

	.submit2 {
		margin: 35rpx 20rpx;
		background-color: #DCDFE6;
		color: white;
	}
</style>